<template>
  <div class="good-base-container">
    <div class="input-cu-group">
        <label for="good-name">商品名称</label>
        <input id="good-name" placeholder="请输入商品的名称" :value="goodName" @change="updateValue('goodName',$event)"/>
        <label class="warn-tip" v-if="goodName===''">*</label>
    </div>
    <div class="input-cu-group">
        <label for="good-spec">商品规格</label>
        <input id="good-spec" placeholder="请输入商品的规格" :value="goodSpec" @change="updateValue('goodSpec',$event)"/>
        <label class="warn-tip"  v-if="goodSpec===''">*</label>
    </div>
    <div class="input-cu-group">
        <label for="good-prcie">商品单价</label>
        <input id="good-prcie" type="number" placeholder="请输入商品的单价" :value="goodPrice" @change="updateValue('goodPrice',$event)"/>
        <label class="warn-tip"  v-if="goodPrice===''">*</label>
    </div>
    <div class="input-cu-group">
        <label for="good-discount">商品折扣(无写0)</label>
        <input id="good-discount" type="number" placeholder="请输入商品的折扣价" :value="goodDiscount" @change="updateValue('goodDiscount',$event)"/>
        <label class="warn-tip"  v-if="goodDiscount===''">*</label>
    </div>
        
    <div class="input-cu-group">
        <label for="good-type">商品类别</label>
        <select ref="select" @change="updateValue('goodType',$event)">
            <optgroup >
                <option v-for="item in typeList" :key="item.typeId" :value="item.typeId" :selected="item.typeId==goodType?'selected':''">{{item.typeName}}</option>
            
            </optgroup>
        </select>
    </div>
    <button :class="canSubmit?'canSub':'cantSub'" @click="submitGood">提交商品</button>
  </div>
</template>

<script>
import {mapMutations,mapState,mapGetters} from 'vuex'
export default {
    computed:{
        ...mapState(['goodName','goodType','goodSpec','goodPrice','goodDiscount']),
        ...mapGetters(['canSubmit'])
    },
    data(){
        return{
            typeList:[],
        }
    },
    methods:{
        ...mapMutations(['setNewValue','uploadGood']),
        updateValue(prop,e){
            
            this.setNewValue({prop:prop,newValue:e.target.value})
        },
        submitGood(){
            this.uploadGood()
        }
    },
    async created(){
        let {data:res} = await this.$http.get('/getAllType')
        this.typeList = res
    }
}
</script>

<style lang="less">
    .good-base-container{
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 95%;
        margin-top: 50px;
        position: relative;
        .cantSub{
            width: 30%;
            position: absolute;
            box-sizing: border-box;
            padding: 15px;
            border-radius: 25px;
            color: #ffffff;
            background-color: #797878;
            border: 0px solid #d12311;
            bottom: 50px;
            left: 150px;
        }
        .canSub{
            width: 30%;
            position: absolute;
            box-sizing: border-box;
            padding: 15px;
            border-radius: 25px;
            color: #ffffff;
            background-color: #1f3c48;
            border: 0px solid #d12311;
            bottom: 50px;
            left: 150px;
        }
        .canSub:hover{
            background-color: #11222a;
        }
        .input-cu-group{
            margin-bottom: 30px;
            position: relative;
            .warn-tip{
                margin-left: 10px;
                text-align: left;
                color: #C00000;
                font-weight: bolder;
            }
            label{
                margin-right: 10px;
                width: 160px;
                text-align: right;
                color: #797878;
            }
            input{
                box-sizing: border-box;
                padding: 5px 10px;
                width: 50%;
                border: 0.5px solid #a2a2a2;
                border-radius: 7px;
            }
            select{
                width: 50%;
                box-sizing: border-box;
                padding: 5px 10px;
                border: 0.5px solid #a2a2a2;
                border-radius: 7px;
            }
        }
        
    }
</style>